<!-- 交友 -->
<template>
    <view class="make-friends">
        <van-nav-bar title="消息" />
        <view class="main-box">
            <scroll-view :scroll-top="state.scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
                @scrolltolower="lower" @scroll="scroll">
                <MessageItem v-for="item in state.massageList" :key="item.ID" :dataItem="item"></MessageItem>
                <Empty v-if="!state.massageList.length" />
            </scroll-view>
        </view>
    </view>
</template>

<script setup>
import { reactive, ref, getCurrentInstance, onMounted, computed } from "vue"
import { getAuthorization, setAuthorization } from "@/utils/auth.js"

import MessageItem from "@/pages/home/components/messageItem/index.vue"
const state = reactive({
    scrollTop: 0,
    massageList: []
})

const upper = (e) => {
}
const lower = (e) => {
}
const scroll = (e) => {
}

// 获取所有用户
import { useAccountStore } from "@/store/index.js"

let store = useAccountStore()
state.massageList = computed(() => {
    let userId = getAuthorization('userId')
    return (store.$state.makeFriendsList.filter( o => o.ID != userId && o.msgUserId == userId))
})



</script>

<style lang="scss" scoped>
.main-box {
    position: fixed;
    width: 100%;
    height: calc(100% - 180rpx);
    .scroll-Y{
        position: absolute;
        width: 100%;
        height: 100%;
    }
}


:deep(.header-tab-item-cur) {
    color: #333 !important;
}

.banner-box {
    margin: 0 30rpx;

    img {
        width: 100%;
    }
}
</style>
